<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
	<script type="text/babel">
     //1.创建组件
    class Person extends React.Component{

      render(){
        console.log(this);
        const {name,age,sex} = this.props
        return (
          // <ul>
          //   <li>姓名：{this.props.name}</li>
          //   <li>性别：{this.props.sex}</li>
          //   <li>年龄：{this.props.age}</li>
          // </ul>
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
          </ul>
        )
      }
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="tom" sex="女" age="18"/>,document.getElementById('example1'))
    ReactDOM.render(<Person name="may" sex="男" age="19"/>,document.getElementById('example2'))

    const p = {name:"Liu",age:21,sex:"男"}
    console.log('@',...p)
    //ReactDOM.render(<Person name={p.name} sex={p.sex} age={p.sex}/>,document.getElementById('example3'))
    ReactDOM.render(<Person {...p}/>,document.getElementById('example3'))
	</script>
  </body>
</html>
